@extends('layout.home')
@section('title', '能源管理看板')
@section('content')
    <style>
        *{padding: 0;margin: 0;}
        html,body{width: 100%;height: 100%;background-color: rgba(22,57,84,1)}
        .oee_line{
            text-align: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        
        table tr td {border:1px solid black;color: white;padding: 6px;}
        .sel1,.sel2{float: left;}
        .sel1{color: white;font-size: 16px;width: 28%}
        .sel2{width: 72%;}
        select{width: 110%} 
    </style>
    {{-- <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;color:white">能源管理看板</div> --}}
    <div id="main7" style="height:300px;"></div>
    <div id="main8" style="height:300px;"></div>

    <div id="main1" style="height:300px;"></div>
    <div id="main2" style="height:300px;"></div>
    
    <div style="text-align: center;height:50px;width:80%">
        <div class="sel1">部门选择</div>
        <div class="sel2">
            <select class="bmxz">
               
                <option value=""></option>
            </select>
        </div>
    </div>
    <div id="main3" style="height:300px;"></div>
    <div id="main4" style="height:300px;"></div>
    <div style="text-align: center;height:50px;width:80%">
        <div class="sel1">精密电表</div>
        <div class="sel2">
            <select class="jmdb selval">
                <option value=""></option>
                
            </select>
        </div>
    </div>
    <div id="main5" style="height:300px;"></div>
    <div id="main6" style="height:300px;"></div>

    
    
    
    <link rel="stylesheet" href="{{URL::asset('css/picktime.css')}}">
    <script src="{{URL::asset('js/picktime.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
    <script>
        //['度数','同期度数']
        function config1(title,data1,data2,data3,miny,maxx,rotate,name1,name2,f){
            let option = {
                title: {
                    text: title,
                    left:"center",
                    textStyle: {//标题颜色
                        color: "white",
                    }
                },
                grid: {
    
                    left: '1%',
                    containLabel: true
                },
                tooltip : {
                    trigger: 'axis',
                    show : true,
                    formatter:f
                    //formatter: '{b} <br/>{a0} : {c0}<br/> {a1}:{c1}',
                },
                //tooltip:  {formatter: '{a} <br/>{b} : {c}'},
                legend: {
                    data:[name1,name2],
                    y:'25px',
                    textStyle:{ color:"white"}
                },
                xAxis: {
                    data: data1,
                    axisLine:{
                    lineStyle:{
                        color:"#FFF"
                    }
                },
                axisLabel:{
                    interval:0,
                    rotate:rotate,
                    textStyle:{
                        color:"#FFF"
                    }
                }

                },
                yAxis: {
                    type:"value",
                    min:miny,
                    max:maxx,
                    axisLine:{
                    lineStyle:{
                        color:"#FFF"
                    }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#FFF"
                        }
                    }
                },
                series: [
                    {
                        //name: '占比',
                        name: name1,
                        type: 'bar',
                        data: data2,
                        itemStyle:{
                            normal:{
                                label: {
									show: true, //开启显示
									position: 'middle', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 12
									},
                                    formatter: '{c}'
								}

                                }
                                
                            }
                        },
                        {
                            //["250000", "350000", "400000", "420000","470000","450000"]
                            name: name2,
                            data: data3,/* 这里要和第一组数据一样、才能保持在最高处*/
                            type: 'line',
                            symbol: 'circle',//拐点样式
                            symbolSize: 14,//拐点大小
                            itemStyle: {
                            normal: {
                                lineStyle: {
                                width: 3,//折线宽度
                                color: "#27dba0"//折线颜色
                                },
                                color: '#27dba0',//拐点颜色
                                borderColor: '#fff',//拐点边框颜色
                                borderWidth: 3,//拐点边框大小
                                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 12
									},
                                    formatter: '{c}'
								}
                            },
                            emphasis: {
                                color: '#4CCEFE'//hover拐点颜色定义
                            }
                            },
                        }

                ]
            };
            return option;
        }
        let myChart7 = echarts.init(document.getElementById('main7'));
        let myChart8 = echarts.init(document.getElementById('main8'));
        let myChart1 = echarts.init(document.getElementById('main1'));
        let myChart2 = echarts.init(document.getElementById('main2'));
        let myChart3 = echarts.init(document.getElementById('main3'));
        let myChart4 = echarts.init(document.getElementById('main4'));
        let myChart5 = echarts.init(document.getElementById('main5'));
        let myChart6 = echarts.init(document.getElementById('main6'));

        var bm="公共用气";//默认选项
        var jmdb="020095-加工中心";//默认选项

        function menulist(){
            $.post("energy_show",{"bm":bm,"jmdb":jmdb} , res => {
                let bmlist   = res.bmlist; 
                let jmdblist = res.jmdb; 
                $(".bmxz option").remove();
                $(".jmdb option").remove();
                bmlist.forEach(item=>{
                    $(".bmxz").append(`<option value=${item.部门}>${item.部门}</option>`)
                    
                })    
                
                jmdblist.forEach(item=>{
                    $(".jmdb").append(`<option value=${item.仪表名称}>${item.仪表名称}</option>`)
                })
            })
        }
        function showdata(){
            //设备看板接口
            //bm="+bm+'&'+'jmdb='+jmdb
            $.post("energy_show",{"bm":bm,"jmdb":jmdb} ,res => {
                let data1   = res.data1; 
                let data2   = res.data2; 
                let data3   = res.data3; 
                let data4   = res.data4; 
                let data5   = res.data5; 
                let data6   = res.data6; 
                let data100   = res.data100; 
                let data101   = res.data101; 

                
                ///////
                let data1_date = [];//
                let data1_ds = [];//
                let data1_tqds = [];//

                let data2_date = [];//
                let data2_df = [];//
                let data2_tqdf = [];//
                //***************************************************
                let data3_date = [];//
                let data3_ds = [];//
                let data3_tqds = [];//

                let data4_date = [];//
                let data4_df = [];//
                let data4_tqdf = [];//

                let data5_date = [];//
                let data5_df = [];//

                let data6_date = [];//
                let data6_tqdf = [];//

                let data101_date = [];//
                let data101_ds   = [];//
                let data101_tqds = [];//
                console.log("100")
                console.log(data100);
                console.log("101")
                console.log(data101);
                let data102_date = [];//
                let data102_ds   = [];//
                let data102_tqds = [];//


                //$('select option').eq(1).attr('selected', true);
                //$(".selval option").eq(1).attr('selected', true);
                data1.forEach(item=>{
                    data1_date.push(item.时间);
                    data1_ds.push(item.度数.toFixed(0));
                    data1_tqds.push(item.同期度数.toFixed(0))
                })
                data2.forEach(item=>{
                    data2_date.push(item.时间);
                    data2_df.push(item.电费.toFixed(0));
                    data2_tqdf.push(item.同期电费.toFixed(0))
                })
                data3.forEach(item=>{
                    data3_date.push(item.时间);
                    data3_ds.push(parseInt(item.度数));
                    data3_tqds.push(parseInt(item.同期度数));
                })
                data4.forEach(item=>{
                    data4_date.push(item.时间);
                    data4_df.push(parseInt(item.电费.toFixed(0)));
                    data4_tqdf.push(parseInt(item.同期电费))
                })

                data5.forEach(item=>{
                    data5_date.push(item.时间2);
                    data5_df.push(parseInt(item.数值));
                })
                data6.forEach(item=>{
                    data6_date.push(item.时间);
                    data6_tqdf.push(parseInt(item.电费));
                })
                data100.forEach(item=>{
                    data101_tqds.push(parseInt(item.per));
                    data102_tqds.push(parseInt(item.产值));
                })
                data101.forEach(item=>{
                    data101_date.push(item.完检日期);
                    data102_date.push(item.完检日期);
                    data101_ds.push(parseInt(item.per));
                    data102_ds.push(parseInt(item.产值));
                })
                    //option1.series[0]['data'].push({value: parseFloat(obj.oee), name: ''}) ;
                   //parseFloat(obj.performance_rate),parseFloat(obj.time_rate),parseFloat(obj.qualified_rate)
                    var date=new Date()
                    var y=date.getFullYear()
                    var m=date.getMonth()+1;
                    let option1 = config1('公司用电同期对比',data1_date,data1_ds,data1_tqds,100000,500000,30,'度数','同期度数');
                    let option2 = config1('公司电费同期对比',data2_date,data2_df,data2_tqdf,100000,500000,0,'电费','同期电费','{b} <br/>{a0} : {c0}<br/> {a1}:{c1}');
                    let option3 = config1('部门用电同期对比',data3_date,data3_ds,data3_tqds,0,80000,0,'度数','同期度数','{b} <br/>{a0} : {c0}<br/> {a1}:{c1}');
                    let option4 = config1('部门电费同期对比',data4_date,data4_df,data4_tqdf,0,80000,0,'度数','同期电费','{b} <br/>{a0} : {c0}<br/> {a1}:{c1}');
                    let option5 = config1(`精密电表本月用电（${y}-${m}）`,data5_date,data5_df,[],0,160,0,jmdb);
                    let option6 = config1('精密电表本年度电费',data6_date,data6_tqdf,[],0,10,0,jmdb);
                    let option7 = config1('每1000万产值消耗能源度数',data101_date,data101_ds,data101_tqds,0,200000,30,'度数','同期度数');
                    let option8 = config1('同期产值对比(万元)',data102_date,data102_ds,data102_tqds,0,10000,30,'产值','同期产值');

                    myChart7.setOption(option7);//柱状图
                    myChart8.setOption(option8);//柱状图
                    
                    myChart1.setOption(option1);//柱状图
                    myChart2.setOption(option2);//柱状图
                    myChart3.setOption(option3);//柱状图
                    myChart4.setOption(option4);//柱状图
                    myChart5.setOption(option5);//柱状图
                    myChart6.setOption(option6);//柱状图
            });           
        }
        showdata();
        menulist();

        $(".bmxz").change(function(){
            bm = $(this).val();
            showdata();
            
            
        })


        $(".selval").change(function(){
            jmdb = $(this).val();
            showdata();            
        })
        
        // ****************************************************
    </script>
    <script>


    </script>

    <style>#header {background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 20px;font-family: '黑体'}</style>
@endsection
